<template>
	<a-card :bordered="false" style="height: 100%" :class="{ 'snowy-field-radius': roundedCornerStyleOpen }">
		<a-tabs v-model:activeKey="activeKey">
			<a-tab-pane key="1" tab="组件列表">
				<!--拖拽组件列表-->
				<span class="left-span-label">拖拽组件</span>
				<a-row class="pt-3 pb-3 rect-printElement-types hiprintEpContainer">
					<a-col :span="12" class="drag_item_box">
						<div class="ep-draggable-item xn-print-draggable-item" tid="defaultModule.text">
							<div>
								<font-size-outlined />
								文本
							</div>
						</div>
					</a-col>
					<a-col :span="12" class="drag_item_box">
						<div class="ep-draggable-item xn-print-draggable-item" tid="defaultModule.image">
							<div>
								<file-image-outlined />
								图片
							</div>
						</div>
					</a-col>
					<a-col :span="12" class="drag_item_box">
						<div class="ep-draggable-item xn-print-draggable-item" tid="defaultModule.longText">
							<div>
								<line-height-outlined />
								长文
							</div>
						</div>
					</a-col>
					<a-col :span="12" class="drag_item_box">
						<div class="ep-draggable-item xn-print-draggable-item" tid="defaultModule.emptyTable">
							<div>
								<table-outlined />
								表格
							</div>
						</div>
					</a-col>
					<a-col :span="12" class="drag_item_box">
						<div class="ep-draggable-item xn-print-draggable-item" tid="defaultModule.html">
							<div>
								<function-outlined />
								html
							</div>
						</div>
					</a-col>
					<a-col :span="12" class="drag_item_box">
						<div class="ep-draggable-item xn-print-draggable-item" tid="defaultModule.customText">
							<div>
								<ellipsis-outlined />
								自定义
							</div>
						</div>
					</a-col>
				</a-row>
				<!--辅助工具-->
				<span class="left-span-label">辅助</span>
				<a-row class="pt-3 pb-3">
					<a-col :span="12" class="drag_item_box">
						<div class="ep-draggable-item xn-print-draggable-item" tid="defaultModule.hline">
							<div>
								<column-width-outlined />
								横线
							</div>
						</div>
					</a-col>
					<a-col :span="12" class="drag_item_box">
						<div class="ep-draggable-item xn-print-draggable-item" tid="defaultModule.vline">
							<div>
								<column-height-outlined />
								竖线
							</div>
						</div>
					</a-col>
					<a-col :span="12" class="drag_item_box">
						<div class="ep-draggable-item xn-print-draggable-item" tid="defaultModule.rect">
							<div>
								<border-outlined />
								矩形
							</div>
						</div>
					</a-col>
					<a-col :span="12" class="drag_item_box">
						<div class="ep-draggable-item xn-print-draggable-item" tid="defaultModule.oval">
							<div>
								<check-circle-outlined />
								矩形
							</div>
						</div>
					</a-col>
				</a-row>
			</a-tab-pane>
			<a-tab-pane key="2" tab="全局字段" :force-render="true">
				<!--全局数据-->
				<span class="left-span-label">用户信息</span>
				<div id="provider-container-user" class="container rect-printElement-types pt-3 pb-3"></div>
				<span class="left-span-label">系统信息</span>
				<div id="provider-container-sys" class="container rect-printElement-types pt-3 pb-3"></div>
			</a-tab-pane>
		</a-tabs>
	</a-card>
</template>
<script setup>
	import { userTemplateData } from '../data/userInfoData'
	import { sysTemplateData } from '../data/sysInfoData'
	import helper from './provider-helper'
	import { globalStore } from '@/store'
	const store = globalStore()
	// 圆角风格
	const roundedCornerStyleOpen = computed(() => {
		return store.roundedCornerStyleOpen
	})

	onMounted(() => {
		// 用户数据
		buildProvider(userTemplateData, true, 'user')
		// 系统数据
		buildProvider(sysTemplateData, true, 'sys')

		// 组建组件列表
		const items = $('.ep-draggable-item')
		hiprint.PrintElementTypeManager.buildByHtml(items)
	})

	const activeKey = ref('1')

	/**
	 * 构建provider
	 * 注意: 可拖拽元素必须在 hiprint.init() 之后调用
	 * 调用之前 可以先 console.log($("#provider-container")) 看看是否有该 dom
	 */
	const buildProvider = (data, clear, type) => {
		if (Array.isArray(data)) {
			let providerList = helper.createProviderList(data)
			hiprint.init({ providers: providerList })
		} else {
			let provider = helper.createProvider(data.key, data.options)
			hiprint.init({ providers: [provider] })
		}
		if (clear) {
			$('#provider-container-' + type).empty() // 先清空, 避免重复构建
		}
		if (Array.isArray(data)) {
			data.forEach((item) => hiprint.PrintElementTypeManager.build($('#provider-container-' + type), item.key))
		} else {
			hiprint.PrintElementTypeManager.build($('#provider-container-' + type), data.key)
		}
	}

	defineExpose({
		activeKey
	})
</script>
<style scoped lang="less">
	.xn-print-draggable-item {
		border: 1px solid #d9d9d9;
		display: flex;
		padding: 8px;
		font-size: 12px;
		border-radius: 2px;
	}

	// 拖拽格子
	.drag_item_box {
		padding: 3px;
	}

	:deep(.rect-printElement-types) {
		.hiprint-printElement-type {
			& > li > ul {
				overflow: hidden;

				& > li {
					padding: 3px;
					height: 40px;
					max-width: 100%;
					box-sizing: border-box;

					& > a {
						width: 100%;
						height: 100%;
						max-width: 100%;
						padding: 8px;
						border: 1px solid #d9d9d9;
						box-shadow: none;
						margin: 0;
						border-radius: 2px;
						color: var(--font-color);
						font-size: 12px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						background-color: rgba(255, 255, 255, 0);
					}
				}
			}
		}
	}

	// 暗黑模式
	:deep(.css-dev-only-do-not-override-1xkl0xm) {
		.rect-printElement-types .hiprint-printElement-type > li > ul > li > a {
			color: var(--text-color-inverse);
		}
	}

	//	圆角风格
	.snowy-field-radius {
		:deep(.rect-printElement-types) {
			.hiprint-printElement-type > li > ul > li > a {
				border-radius: 6px;
			}
		}
		.xn-print-draggable-item {
			border-radius: 6px;
		}
	}
</style>
